/* Buttons
=================================================================== */
.btn {
	border: none;
	.border-radius(2px);
	text-shadow: none;
	color: @mainText;
	
	i {
		margin-top: 2px;
	}	
}

.btn-default {
	@color: @border;
	
	color: #a6a6a6;
  	background: #f1f1f1;
	border: 1px solid #d4d4d4;
	.box-shadow-double(inset 0 0 1px 1px rgba(255,255,255,1), 0 2px 1px -1px rgba(0,0,0,.1));
	
	&:hover,
	&.disabled,
	&[disabled] {
  		background-color: darken(#f1f1f1,10%);
		border-color: darken(#a6a6a6,10%);
	}

	&:active,
	&.active {
  		background-color: darken(#f1f1f1,12%);
		border-color: darken(#a6a6a6,12%);
	}
}

.btn-primary {
	@color: @primary;
	
	color: white;
  	background: @color;
	border: 1px solid @color;
	.box-shadow-double(inset 0 0 1px 1px rgba(255,255,255,.35), 0 2px 1px -1px rgba(0,0,0,.2));
	
	&:hover,
	&.disabled,
	&[disabled] {
  		background-color: darken(@color,10%);
		border-color: darken(@color,10%);
	}

	&:active,
	&.active {
  		background-color: darken(@color,12%);
		border-color: darken(@color,12%);
	}	
}

.btn-warning {
	@color: @warning;
	
	color: white;
  	background: @color;
	border: 1px solid @color;
	.box-shadow-double(inset 0 0 1px 1px rgba(255,255,255,.35), 0 2px 1px -1px rgba(0,0,0,.2));
	
	&:hover,
	&.disabled,
	&[disabled] {
  		background-color: darken(@color,10%);
		border-color: darken(@color,10%);
	}

	&:active,
	&.active {
  		background-color: darken(@color,12%);
		border-color: darken(@color,12%);
	}	
}

.btn-danger {
	@color: @danger;
	
	color: white;
  	background: @color;
	border: 1px solid @color;
	.box-shadow-double(inset 0 0 1px 1px rgba(255,255,255,.35), 0 2px 1px -1px rgba(0,0,0,.2));
	
	&:hover,
	&.disabled,
	&[disabled] {
  		background-color: darken(@color,10%);
		border-color: darken(@color,10%);
	}

	&:active,
	&.active {
  		background-color: darken(@color,12%);
		border-color: darken(@color,12%);
	}	
}

.btn-success {
	@color: @success;
	
	color: white;
  	background: @color;
	border: 1px solid @color;
	.box-shadow-double(inset 0 0 1px 1px rgba(255,255,255,.35), 0 2px 1px -1px rgba(0,0,0,.2));
	
	&:hover,
	&.disabled,
	&[disabled] {
  		background-color: darken(@color,10%);
		border-color: darken(@color,10%);
	}

	&:active,
	&.active {
  		background-color: darken(@color,12%);
		border-color: darken(@color,12%);
	}	
}


.btn-info {
	@color: @info;
	
	color: white;
  	background: @color;
	border: 1px solid @color;
	.box-shadow-double(inset 0 0 1px 1px rgba(255,255,255,.35), 0 2px 1px -1px rgba(0,0,0,.2));
	
	&:hover,
	&.disabled,
	&[disabled] {
  		background-color: darken(@color,10%);
		border-color: darken(@color,10%);
	}

	&:active,
	&.active {
  		background-color: darken(@color,12%);
		border-color: darken(@color,12%);
	}	
}

.btn-inverse {
	@color: @inverse;
	
	color: white;
  	background: @color;
	border: 1px solid @color;
	.box-shadow-double(inset 0 0 1px 1px rgba(255,255,255,.35), 0 2px 1px -1px rgba(0,0,0,.2));
	
	&:hover,
	&.disabled,
	&[disabled] {
  		background-color: darken(@color,10%);
		border-color: darken(@color,10%);
		color: white;
	}

	&:active,
	&.active {
  		background-color: darken(@color,12%);
		border-color: darken(@color,12%);
	}	
}

.btn-facebook,
.btn-twitter,
.btn-linkedin,
.btn-flickr,
.btn-tumblr,
.btn-xing,
.btn-github,
.btn-html5,
.btn-openid,
.btn-stack-overflow,
.btn-youtube,
.btn-css3,
.btn-dribbble,
.btn-google-plus,
.btn-instagram,
.btn-pinterest,
.btn-vk,
.btn-yahoo,
.btn-behance,
.btn-dropbox,
.btn-reddit,
.btn-spotify,
.btn-vine,
.btn-foursquare,
.btn-vimeo {
	color: white !important;
	position:relative;
	text-align: center;
	font-family: 'FontAwesome';
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	height: 34px;
	.box-shadow(0 2px 1px -1px rgba(0,0,0,.2));
	
	&:before {
		position: absolute;
		display: block;
		height: 34px;
		width: 34px;
		top: 0;
		left: 0;
		.border-radius(2px);
		font-size: 1.33333333em;
		line-height: 36px;
	}
	
	span {
		margin-left: 40px;
	}
	
	&:hover {
		color: white;
	}
	
	&.icon {
		width: 34px;
		
		span {
			display: none;
		}
	}
	
	&.text {
		&:before {
			display: none;
		}
		
		span {
			margin-left: 0 !important;
		}
	}
	
	&.btn-xs {
		height: 22px;
		font-size: 12px;
		
		&:before {
			height: 22px;
			width: 22px;
			line-height: 22px;
			font-size: 12px;
		}
		
		span {
			margin-left: 22px;
		}

		&.icon {
			width: 22px;
		}
	}
	
	&.btn-sm {
		height: 30px;
		font-size: 12px;
		
		&:before {
			height: 30px;
			width: 30px;
			line-height: 30px;
			font-size: 12px;
		}
		
		span {
			margin-left: 30px;
		}

		&.icon {
			width: 30px;
		}
	}
	
	&.btn-lg {
		height: 45px;
		font-size: 18px;
		
		&:before {
			height: 45px;
			width: 45px;
			line-height: 45px;
			font-size: 18px;
		}
		
		span {
			margin-left: 45px;
		}

		&.icon {
			width: 45px;
		}
	}
}

.btn-facebook {
	@color: @facebook;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f09a";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-twitter {
	@color: @twitter;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f099";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-linkedin {
	@color: @linkedin;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f0e1";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-flickr {
	@color: @flickr;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f16e";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-tumblr {
	@color: @tumblr;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f173";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-xing {
	@color: @xing;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f168";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-github {
	@color: @github;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f09b";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-html5 {
	@color: @html5;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f13b";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-openid {
	@color: @openid;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f19b";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-stack-overflow {
	@color: @stack-overflow;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f16c";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-css3 {
	@color: @css3;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f13c";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-youtube {
	@color: @youtube;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f167";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-dribbble {
	@color: @dribbble;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f17d";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-google-plus {
	@color: @google-plus;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f0d5";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-instagram {
	@color: @instagram;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f16d";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-pinterest {
	@color: @pinterest;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f0d2";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-vk {
	@color: @vk;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f189";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-yahoo {
	@color: @yahoo;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f19e";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-behance {
	@color: @behance;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f1b4";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-dropbox {
	@color: @dropbox;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f16b";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-reddit {
	@color: @reddit;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f1a1";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-spotify {
	@color: @spotify;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f1bc";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-vine {
	@color: @vine;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f1ca";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-foursquare {
	@color: @foursquare;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f180";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.btn-vimeo {
	@color: @vimeo;
	
	background: @color;
	border: 1px solid @color;
	
	&:before {
		content: "\f194";
		background: darken(@color, 5%);
		margin: -1px;
	}
	
	&:hover {
		background: darken(@color, 5%);
		
		&:before {
			background: darken(@color, 10%);
		}		
	}
}

.dropdown-menu {
	.border-radius(2px);
	border: 1px solid @border;
	.box-shadow(0 2px 4px rgba(0,0,0,.125));
	
	li {
		
		a {
			&:hover {
				background-color: @main;
			}
		}
		
		&.divider {
		  background-color: @main;
		}
		
	}
}